import {createRouter, createWebHistory, type RouteRecordRaw} from 'vue-router'
import HomeView from '../views/basic/HomeView.vue'
import Reactivity from "../views/basic/Reactivity.vue";
import Condition from "../views/basic/Condition.vue";
import Computed from "../views/basic/Computed.vue";
import ClassAndStyle from '../views/basic/ClassAndStyle.vue';
import List from "../views/basic/List.vue";
import Event from "../views/basic/Event.vue";
import Form from "../views/basic/Form.vue";
import Watcher from "../views/basic/Watcher.vue";
import TemplateRefs from "../views/basic/TemplateRefs.vue";
import ComponentBasics from "../views/component/ComponentBasics.vue";
import ComponentRegister from "../views/component/ComponentRegister.vue";
import ComponentProps from "../views/component/ComponentProps.vue";
import ComponentEvent from "../views/component/ComponentEvent.vue";
import ComponentModel from "../views/component/ComponentModel.vue";
import ComponentAttr from "../views/component/ComponentAttr.vue";
import ComponentSlot from "../views/component/ComponentSlot.vue";
import ComponentInject from "@/views/component/ComponetInject.vue";
import Async from "../views/basic/Async.vue";
import Composable from "@/views/reuse/Composable.vue";
import CustomDirective from "../views/reuse/CustomDirective.vue";
import CustomPlugin from "@/views/reuse/CustomPlugin.vue";
import BuiltInTransition from "@/views/builtIn/BuiltInTransition.vue";
import BuiltInTransitionGroup from "@/views/builtIn/BuiltInTransitionGroup.vue";
import BuiltInKeepAlive from "@/views/builtIn/BuiltInKeepAlive.vue";
import BuiltInTeleport from "@/views/builtIn/BuiltInTeleport.vue";
import BuiltInSuspense from "@/views/builtIn/BuiltInSuspense.vue";
import SingleFileComponent from "@/views/scalingUp/SingleFileComponent.vue";
import StateManage from "@/views/scalingUp/StateManage.vue";
import PiniaStart from "@/views/pinia/PiniaStart.vue";
import PiniaState from "@/views/pinia/PiniaState.vue";
import PiniaGetter from "@/views/pinia/PiniaGetter.vue";
import PiniaAction from "@/views/pinia/PiniaAction.vue";
import RouterIndex from "@/views/router/RouterIndex.vue";
import DynamicMatch from "@/views/router/DynamicMatch.vue";
import MatchingSyntax from "@/views/router/MatchingSyntax.vue";
import NestedRoute from "@/views/router/NestedRoute.vue";
import UserTab from "@/components/UserTab.vue";
import UserInfo from "@/views/router/UserInfo.vue";
import UserOrder from "@/views/router/UserOrder.vue";
import UserAccount from "@/views/router/UserAccount.vue";
import NamedRoute from "@/views/router/NamedRoute.vue";
import Navigation from "@/views/router/Navigation.vue";
import UserEmailSetting from "@/views/router/UserEmailSetting.vue";
import UserProfile from "@/views/router/UserProfile.vue";
import UserProfileHelper from "@/views/router/UserProfileHelper.vue";
import Redirection from "@/views/router/Redirection.vue";
import RedirectSecond from "@/views/router/RedirectSecond.vue";
import RouterProps from "@/views/router/RouterProps.vue";
import RedirectThird from "@/views/router/RedirectThird.vue";
import UserSetting from "@/views/router/UserSetting.vue";
import Guarder from "@/views/router/Guarder.vue";
import GridIndex from "@/views/grid/GridIndex.vue";

let routes: Readonly<RouteRecordRaw[]> = [
    {
        path: '/',
        name: 'home',
        component: HomeView,
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (About.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import('../views/basic/AboutView.vue'),
    },
    {
        path: '/grid2',
        name: '网格布局',
        component: GridIndex,
    },

    {
        path: '/basic',
        name: '基础',
        children: [
            {
                path: 'computed',
                name: "计算属性",
                component: Computed,
            },
            {
                path: 'class_style',
                name: "类与样式绑定",
                component: ClassAndStyle,
            },
            {
                path: 'list',
                name: "列表",
                component: List,
            },
            {
                path: 'event',
                name: "事件",
                component: Event,
            },
            {
                path: 'form',
                name: "表单",
                component: Form,
            },
            {
                path: 'watch',
                name: "侦听器",
                component: Watcher,
            },
            {
                path: 'template-refs',
                name: "模板引用",
                component: TemplateRefs,
            },
            {
                path: 'reactive',
                name: "响应式编程",
                component: Reactivity,
            },
            {
                path: 'condition',
                name: "条件渲染",
                component: Condition,
            },
        ]
    },
    {
        path: '/component',
        name: "组件",
        children: [
            {
                path: 'base',
                name: "组件基础",
                component: ComponentBasics,
            },
            {
                path: 'register',
                name: "组件注册",
                component: ComponentRegister,
            },
            {
                path: 'props',
                name: "组件属性",
                component: ComponentProps,
            },
            {
                path: 'event',
                name: "组件事件",
                component: ComponentEvent,
            },
            {
                path: 'v-model',
                name: "组件v-model",
                component: ComponentModel,
            },
            {
                path: 'attr',
                name: "透传 Attr",
                component: ComponentAttr,
            },
            {
                path: 'slot',
                name: "组件插槽",
                component: ComponentSlot,
            },
            {
                path: 'provide_inject',
                name: "依赖注入",
                component: ComponentInject,
            },
            {
                path: 'async',
                name: '异步组件',
                component: Async,
            },
        ],
    },

    {
        path: '/reuse',
        name: '逻辑复用',
        children: [
            {
                path: 'composable',
                name: '组合式函数',
                component: Composable,
            },
            {
                path: 'custom-directive',
                name: '自定义指令',
                component: CustomDirective,
            },
            {
                path: 'plugin',
                name: '插件',
                component: CustomPlugin,
            },
        ],
    },
    {
        path: '/built-in',
        name: '内置组件',
        children: [
            {
                path: 'transition',
                name: 'transition转场',
                component: BuiltInTransition,
            },
            {
                path: 'transition-group',
                name: 'transition-group',
                component: BuiltInTransitionGroup,
            },
            {
                path: 'keep-alive',
                name: 'keep-alive',
                component: BuiltInKeepAlive,
            },
            {
                path: 'teleport',
                name: 'teleport',
                component: BuiltInTeleport,
            },
            {
                path: 'suspense',
                name: 'suspense',
                component: BuiltInSuspense,
            },
        ],
    },
    {
        path: '/scaling-up',
        name: '应用规模化',
        children: [
            {
                path: 'sfc',
                name: '单文件组件',
                component: SingleFileComponent
            },
            {
                path: 'sta',
                name: '状态管理',
                component: StateManage
            },
        ],
    },
    {
        path: '/pinia',
        name: 'pinia',
        children: [
            {
                path: 'start',
                name: '入门',
                component: PiniaStart
            },
            {
                path: 'state',
                name: 'state属性',
                component: PiniaState
            },
            {
                path: 'getter',
                name: 'getter属性',
                component: PiniaGetter
            },
            {
                path: 'action',
                name: 'action属性',
                component: PiniaAction
            },
        ],
    },

    {
        path: '/router',
        name: '路由',
        meta: {icon: 'demo'},
        children: [
            {
                path: 'start',
                name: '入门',
                component: RouterIndex,
            },
            {
                path: 'dynamic/:id(.*)+',
                name: '动态路由',
                component: DynamicMatch,
            },
            {
                path: 'match-syntax',
                name: '路由语法',
                component: MatchingSyntax,
            },
            {
                path: 'nested-route',
                name: '嵌套路由',
                component: NestedRoute,
            },
            {
                path: '/user-info',
                name: '用户中心',
                component: UserInfo,
                children: [
                    {
                        path: '',//默认子路由空，则打开父路由时自动打这个子路由
                        name: '帐户信息',
                        component: UserAccount,
                    },
                    {
                        path: 'order',
                        name: '订单信息',
                        component: UserOrder,
                    },
                ]
            },
            {
                path: 'named-route',
                name: '命名路由',
                component: NamedRoute,
            },
            {
                path: 'route-navigation',
                name: '导航',
                component: Navigation,
            },
            {
                path: 'names-view',
                name: '命名视图',
                component: UserSetting,
                children: [
                    {
                        path: 'email',
                        name: 'user-email',
                        component: UserEmailSetting,
                    },
                    {
                        path: 'profile',
                        name: 'user-profile',
                        components: {
                            default: UserProfile,
                            helper: UserProfileHelper,
                        }
                    }
                ],
            },
            // {
            //     path: 'names-view',
            //     name: '命名视图',
            //     component: NamesView,
            //     children:[
            //         {
            //             path: '',
            //             name:'命名视图Demo',
            //             components:{
            //                 default:NavBody,
            //                 left:NavLeft,
            //                 right:NavRight,
            //             }
            //         }
            //     ]
            // }
            {
                path: '/path-redirect',
                name: '重定向',
                component: Redirection,
                children: [
                    {
                        path: '/path-redirect/first',
                        name: 'redirect-first',
                        // redirect:'/path-redirect/second',//重定向到指定的 路由地址
                        // redirect: {name: 'redirect-second'} //重定向到指定的 命名路由
                        redirect: path => {
                            console.log(path)
                            return '/';
                        }
                    },
                    {
                        path: '/path-redirect/second',
                        name: 'redirect-second',
                        component: RedirectSecond,
                    },
                    {
                        path: '/path-redirect/third',
                        name: 'redirect-third',
                        component: RedirectThird,
                        alias: ['/third'],//别名
                    }
                ],


            },
            {
                path: 'passing-props/:id',
                name: '传递Props',
                component: RouterProps,
                //属性模式
                // props: true,
                //对象模式
                // props:{
                //     id:1799,
                // },
                //函数模式
                props: route => {
                    console.log(route);
                    return {
                        id: Math.random().toString(16).slice(2, 5)
                    }
                }
            },
            {
                path: 'guard',
                name: '路由守卫',
                component: Guarder,
                meta: {isAuth: true},
                beforeEnter: (to, from, next) => {
                    console.log('beforeEnter_to', to)
                    console.log('beforeEnter_from', from)
                    next()
                }
            }
        ],
    }


];
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    // history: createWebHashHistory(),
    routes: routes,
})

export {router, routes}

export default {};
